<template>
  <div>
    <!--面包屑-->
    <div style="height: 30px;width: 98%;background-color: white;padding-top: 13px;padding-left: 2%;">
      <i class="el-icon-s-home lf" style="font-size: 18px;margin-right: 10px;"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item >典当物品管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }">评估报告总览</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--选择区域-->
    <div style="padding: 20px;">
      <i class="el-icon-search lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
      <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
        <span style="font-size: 20px;font-weight: 500;color: black;">条件查询</span>
        <el-button @click="findNewValues()" size="small" style="border-radius: 0%;background-color: #666666;margin-left: 75.5%;" type="info">查询</el-button>
        <el-button @click="clearFind" size="small" style="border-radius: 0%;background-color: #666666;margin-left: 2%;" type="info">清空</el-button>
      </div>
      <div style="border: #d7d7d7 1px solid;">
        <div class="cl" style="margin-bottom: 20px;margin-top: 20px;">
          <div class="lf" style="margin-left: 120px;">
            <span>评估人：</span>
            <el-select v-model="find.adminName" clearable placeholder="请选择评估人">
              <el-option
                v-for="item in surveryAccount"
                :key="item.adminId"
                :label="item.adminName"
                :value="item.adminName">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <!--数据区域-->
    <div style="padding: 20px;padding-top: 0px;">
      <i class="el-icon-s-grid lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
      <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
        <span style="font-size: 20px;font-weight: 500;color: black;">数据列表</span>
      </div>
      <div>
        <el-table
          :data="allRecords.records"
          :row-style="{height:'46px'}"
          border
          :header-cell-style="tableHeader"
          :cell-style="{borderColor:'#CCCCCC',margin:'0',padding:'0'}"
          style="width: 100%;font-size: 18px;border: #CCCCCC solid 1px;">
          <el-table-column
            align="center"
            prop="goodsName"
            label="物品名称"
            width="160">
          </el-table-column>
          <el-table-column
            align="center"
            prop="goodsBrand"
            label="品牌"
            width="160">
          </el-table-column>
          <el-table-column
            align="center"
            prop="goodsCat"
            label="类别"
            width="240">
          </el-table-column>
          <el-table-column
            align="center"
            prop="officialPrice"
            label="官方价(元)"
            width="160">
          </el-table-column>
          <el-table-column
            align="center"
            prop="valuePrice"
            label="评估价(元)"
            width="160">
          </el-table-column>
          <el-table-column
            align="center"
            prop="pawnPric"
            label="典当(元)"
            width="160">
          </el-table-column>
          <el-table-column
            align="center"
            prop="purchasePrice"
            label="收购价(元)"
            width="160">
          </el-table-column>
          <el-table-column
            align="center"
            prop="createBy"
            label="创建人"
            width="160">
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间"
            width="205">
          </el-table-column>
          <el-table-column
            align="center"
            prop="remark"
            label="备注"
            width="180">
          </el-table-column>
          <el-table-column label="操作" width="180"
            align="center">
            <template slot-scope="scope">
              <el-button type="info"
                style="border-radius: 0%;background-color: #666666;font-size: 16px;"
               size="mini" @click="showOld(scope.row.old)">历史评估记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <!--分页-->
      <div style="background-color: #D7D7D7;height: 105px;width: 100%;">
        <el-pagination
        class="rf"
        style="margin-right: 2%;margin-top: 60px;"
          @current-change="handleCurrentChange"
          :current-page.sync="allRecords.current"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="allRecords.total">
        </el-pagination>
      </div>
    </div>

    <!--历史评估记录-->
    <el-dialog :visible.sync="isShow" >
      <!--小标题-->
      <div style="min-height: 90%;width: 100%;">
        <i class="el-icon-s-grid lf" style="font-size: 26px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 20px;"></i>
        <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #CCCCCC;height: 40px;;width: 98%;padding-top: 8px;padding-left: 1.85%;">
          <span style="font-size: 20px;font-weight: 500;color: black;">历史评估记录</span>
          <i class="el-icon-close rf" style="font-size: 26px;font-weight: bold;font-weight:bold;margin-right: 20px;"></i>
        </div>
      </div>
      <!--物品信息-->
      <div style="width: 100%;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #E4E4E4;">
        <div style="border-left: 2px solid #CCCCCC;width: 98%;height: 100%;padding: 2%;">
          <el-table :data="oldRecord"
          :row-style="{height:'46px'}"
          :header-cell-style="tableHeader"
          border
          style="width: 97%;border: #797979 1px solid;"
          :cell-style="{borderColor:'#797979',margin:'0',padding:'0'}">
            <el-table-column align="center" property="officialPrice" label="官方价" width="150"></el-table-column>
            <el-table-column align="center" property="valuePrice" label="评估价" width="200"></el-table-column>
            <el-table-column align="center"property="createBy" label="评估人"></el-table-column>
            <el-table-column align="center"property="createTime" label="评估时间"></el-table-column>
            <el-table-column align="center"property="remark" label="备注"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default{
    name:"ValueRecordVew",
    data(){
      return{
        //条件查询鉴定记录对象
        find:{
          pageNum:1,
          pageSize:10
        },
        //所有鉴定师
        surveryAccount:[],
        //鉴定结果选项
        result:[
          "正品",
          "假货",
          "资料不全"
        ],
        //新旧程度选项
        goodsQuality:[
          "全新",
          "九八新",
          "九五新",
          "八成新",
          "七成新"
        ],
        //所有鉴定记录分页对象
        allRecords:{},
        //历史鉴定记录
        oldRecord:{},
        //是否显示历史鉴定记录
        isShow:false,
      }
    },
    methods:{
      /**
       * 显示历史记录
       * @param {Object} old 指定对象的历史记录
       */
      showOld(old){
        this.oldRecord = old
        this.isShow = true
      },
      /**
       * 变化页码
       * @param {Object} val 新的页码
       */
      handleCurrentChange(val) {
        this.find.pageNum = val
        this.findNewValues()
      },
      /**
       * 根据角色Id 查询账号详情
       */
      selectAccountInfoByRoleId(){
        let roleId = 6
        this.$http.get("/admin/adminAccount/selectAccountInfoByRoleId",{params:{roleId:roleId}}).then(resp=>{
          this.surveryAccount = resp.data.data
        })
      },
      /**
       * 分页条件查询所有鉴定报告
       */
      findNewValues(){
        this.$http.post("/goods/goodsValueRecords/findNewValues",this.find).then(resp=>{
          this.allRecords = resp.data.data
        })
      },
      /**
       * 表格表头样式
       */
      tableHeader({ row, column, rowIndex, columnIndex }){
        if (rowIndex === 0) {
          return 'background-color: #D7D7D7;color:#333333;font-size:18px;font-weight: 500;height: 40px;margin-top: 85px;border-color:#CCCCCC;'
        }
      },
      /**
       * 清空选择对象
       */
      clearFind(){
        let num = this.find.pageNum
        let size = this.find.pageSize
        this.find = {}
        this.find.pageNum = num
        this.find.pageSize = size
        this.findNewValues()
      },
    },
    activated(){
      this.selectAccountInfoByRoleId()
      this.findNewValues()
    }
  }
</script>

<style>
  *{
    padding: 0;
    margin: 0;
  }
  .cl::after{
    content: '';
    display: block;
    clear: both;
  }
  .lf{
  	float: left;
  }
  .rf{
  	float: right;
  }
  .el-table th.gutter{
    display: table-cell!important;
  }
  .el-dialog__header{
    padding: 0;
  }
  .el-dialog__body{
    padding: 0;
  }
  .el-button--small{
    font-size: 14px;
    width: 70px;
    height: 30px;
  }
</style>
